<template>
  <BModal
    :title="title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :height="700"
    :width="700"
    @ok="save"
    @cancel="closeModal"
  >
    <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :rules="rules" :wrapper-col="wrapperCol">
      <a-row>
        <a-col :span="24">
          <a-form-model-item ref="ip" label="数据库IP" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }" prop="ip">
            <a-input v-model.trim="form.ip" placeholder="请输入数据库IP" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item ref="port" label="port" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }" prop="port">
            <a-input v-model.trim="form.port" placeholder="请输入port" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item
            ref="userName"
            label="用户名"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 16 }"
            prop="userName"
          >
            <a-input v-model.trim="form.userName" placeholder="请输入用户名" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item
            ref="passWord"
            label="密码"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 16 }"
            prop="passWord"
          >
            <a-input v-model.trim="form.passWord" placeholder="请输入密码" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item
            ref="dbType"
            label="数据库"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 16 }"
            prop="dbType"
          >
            <a-select v-model="form.dbType" style="width: 100%" placeholder="请选择数据库">
              <a-select-option v-for="item in dbList" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item
            ref="path"
            label="备份路径"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 16 }"
            prop="path"
          >
            <a-input v-model.trim="form.path" placeholder="请输入备份路径" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item
            ref="size"
            label="文件大小"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 16 }"
            prop="size"
          >
            <a-input v-model.trim="form.size" placeholder="请输入文件大小" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item
            ref="version"
            label="版本"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 16 }"
            prop="version"
          >
            <a-input v-model.trim="form.version" placeholder="请输入版本" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </BModal>
</template>
<script>
import { updateData, getTreeData } from '../api.js';
import SecretSelector from '@bdp-comp/selector/SecretSelector';

const treeMap = new Map();
export default {
  name: 'dataRecoveryEdit',
  components: { SecretSelector },
  props: {
    title: String,
    radioOptions: {
      type: Array,
      default: () => [],
    },
    record: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    const that = this;
    const checkName = async (rule, value, callback) => {
      if (!value) {
        callback(new Error('目录名称不能为空'));
      }
    };
    return {
      rules: {
        ip: [{ required: true, message: '不能为空', trigger: 'blur' }],
        port: [{ required: true, message: '不能为空', trigger: 'blur' }],
        userName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '不能为空', trigger: 'blur' }],
        dbType: [{ required: true, message: '请选择', trigger: 'change' }],
        path: [{ required: true, message: '不能为空', trigger: 'blur' }],
        size: [{ required: true, message: '不能为空', trigger: 'blur' }],
        version: [{ required: true, message: '不能为空', trigger: 'blur' }],
      },
      visible: true,
      confirmLoading: false,
      labelCol: { span: 3 },
      wrapperCol: { span: 20 },
      treeData: [],
      dbList: [],
      form: {
        id: undefined,
        ip: undefined,
        port: undefined,
        userName: undefined,
        passWord: undefined,
        dbType: undefined,
        path: undefined,
        size: undefined,
        version: undefined,
      },
      limitLevel: '',
    };
  },
  watch: {
    record: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.form.id = this.record.id;
        this.form.ip = this.record.ip;
        this.form.port = this.record.port;
        this.form.userName = this.record.userName;
        this.form.passWord = this.record.passWord;
        this.form.dbType = this.record.dbType;
        this.form.path = this.record.path;
        this.form.size = this.record.size;
        this.form.version = this.record.version;
      },
    },
  },
  computed: {},
  created() {},
  mounted() {},

  methods: {
    /**保存 */
    save() {
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          console.log(this.treePath);
          console.log(this.form);
          // let data = {
          //   id: this.form.id,
          //   /** 设备类型编号 */
          //   deviceTypeId: this.treePath,
          //   /** 设备名称 */
          //   deviceName: this.form.deviceName,
          //   /** 设备备注 */
          //   deviceRemark: this.form.deviceRemark,
          //   /** 设备位置信息 */
          //   deviceLocation: this.form.deviceLocation,
          //   /** 设备负责人 */
          //   devicePerson: this.form.devicePerson,
          //   /** 设备管控部门 */
          //   deviceDept: this.form.deviceDept,
          //   /** 设备种类  0边缘盒子1具体设备 */
          //   equiType: this.form.equiType,
          //   /** 协议类型OPC 0 MODBUS-TCP 1 MODBUS-RTU 2等等 */
          //   agreementType: this.form.agreementType,
          // };
          // let deviceProtocolsJson = {};
          // data.deviceProtocolsJson = JSON.stringify(deviceProtocolsJson);
          // console.log(data);
          // const message = '修改成功';
          // try {
          //   this.confirmLoading = true;
          //   const { code } = await updateData({
          //     ...data,
          //   });
          //   if (code === 0) {
          //     this.$message.success(message);
          //     // this.$emit('saveRefreshTree');
          //     this.$emit('success');
          //     this.closeModal();
          //   }
          //   this.confirmLoading = false;
          // } catch (error) {
          //   this.confirmLoading = false;
          // }
        } else {
          return false;
        }
      });
    },
    /**关闭弹窗 */
    closeModal() {
      this.$emit('close');
    },
    onTreeSelect(value) {
      console.log(value);
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .ant-form-horizontal .ant-form-item .ant-form-item-control-wrapper {
  flex: none;
}
</style>
